<template>
	
	<view class="content">
		
		<u-navbar
			title="订单结算"
			@leftClick="leftClick"
			:placeholder="true"
			:fixed="true"
			bgColor="#F6F8F9"
			:autoBack="true"
		>
		</u-navbar>
		
		<view class="page_margin_box">
			<!-- 页面边距 起-->
			<!-- 已选择好收货地址 起 -->
			<view class="addr_info" @click="gotopage('address_list')">
				<view class="addr">
					<view class="addr_icon_un_box">
						<!-- 地址图标 -->
						<view class="addr_icon">
							<image src="../../static/img/tuihuo/address.png" class="addr_icon_img"></image>
						</view>
						<view class="addr_UserName">收货人：陈先生</view>
					</view>
					<view class="addr_UserPhone">13531013644</view>
				</view>
				
				<view class="addr_det_update_box">
					<view class="addr_detail_info">
						<view class="addr_detail">广东省 广州市 番禺区 汉溪大道东362号粤海广场写字楼38层3807室</view>
					</view>
					<!-- <view class="update_box">
						<view class="addr_update_name">修改</view>
						<view class="right_icon"></view>
					</view> -->
				</view>
			</view>
			<!-- 已选好收货地址 始 -->
			
			<!-- 订单商品列表 起 -->
			<block v-for="(item, index) in 2">
				<view class="goods_box">
					<view class="goods_info_box">
						<view class="goods_img_box">
							<image class="goods_img" src="../../static/logo.png"></image>
						</view>
						
						<view class="goods_text_box">
							<view class="goods_name">MAGIC DRAGON魔杰龙轻柔倍适学步裤</view>
							<view class="goods_size">尺寸：L</view>
							<view class="goods_price_box">
								<view class="goods_price">￥19.99</view>
								<view class="goods_num">X2</view>
							</view>
						</view>
						
					</view>
					<!-- <view class="order_price_box">
						<view class="or_number">2件商品</view>
						<view class="or_payMoeny">共计金额：￥39.99</view>
					</view> -->
				</view>
			</block>
			<!-- 订单商品列表 终 -->
			<view class="shar_name">5折加购</view>
			
			<view class="shar_add_box">
				<!-- <view class="shar_goods_box"> -->
					
					<view class="choose_img_box">
						<view class="chooes_quan"></view>
						<view class="shar_goods_img_box">
							<image class="goods_img_box" src="../../static/logo.png"></image>
						</view>
					</view>
					
					<view class="shar_goods_name_box">
						<view class="shar_goods_name">MAGIC DRAGON魔杰龙轻柔倍适学步裤</view>
						<view class="shar_size">尺寸：L</view>
						<view class="shar_price_box">
							<view class="shar_box_price">
								<view class="shar_goods_price">￥50</view>
								<view class="shar_huax_price">￥100</view>
							</view>
							<view style="font-size: 24upx;">
								<u-number-box
									v-model="value" 
									@change="valChange"
									inputWidth="25"
									buttonSize="20"
								></u-number-box>
							</view>
						</view>
					</view>
					
				<!-- </view> -->
			</view>
			
			
			<view class="coupon_box">
				<view class="coupon_name">优惠劵</view>
				<view class="coupon_right_box">
					<view class="coupon_ri_name">免配送费</view>
					<view class="right_icon"></view>
				</view>
			</view>
			
			
			<view class="goods_money_box">
				<view class="goods_name_text">商品金额</view>
				<view class="godds_money">￥39.99</view>
			</view>
			
			<view class="goods_send_box">
				<view class="goods_name_text">运费</view>
				<view class="goods_send_money_box">
					<view class="huaxian_price">￥30.00</view>
					<view class="shifu_price">￥00.00</view>
				</view>
			</view>
			
		</view>
		<!-- 页边距结束 -->
			
			<view class="zhanwei"></view>
			
			<view class="goto_pay_button">
				<view class="button_box">
					<view class="pay_number">共2件，</view>
					<view class="pay_all">合计：</view>
					<view class="pay_nomey">￥39.99</view>
					<view class="pay_button">立即支付</view>
				</view>
			</view>
		
	</view>
</template>

<script>
	export default {
		methods:{
			gotopage(param){
				if(param == 'edit_addr'){
					uni.navigateTo({
						url:'/pages/address/edit_addr'
					})
				}
				if(param == 'address_list'){
					uni.navigateTo({
						url:'/pages/address/address_list'
					})
				}
			},
			leftClick(e){
				console.log(e)
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style>
	page {
		background: #F6F8F9;
	}
	.content{
		width: 100%;
		overflow-x: hidden;
	}
	.addr_info{
		margin-top: 2upx;
		padding: 36upx 38upx 24upx 24upx;
		background-color: #FFFFFF;
		border-radius: 8upx;
		height: 204upx;
		border-radius: 8upx;
		margin-bottom: 24upx;
	}
	
	.addr{
		display: flex;
		justify-content: space-between;
		width: 584upx;
	}
	
	.addr_icon_un_box{
		display: flex;
	}
	.addr_icon{
		width: 40upx;
		height: 40upx;
	}
	
	.addr_icon_img{
		width: 36upx;
		height: 36upx;
	}
	
	.addr_UserName{
		margin-left: 12upx;
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 40upx;
	}
	
	.addr_UserPhone{
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #666666;
		line-height: 40upx;
	}
	
	.addr_detail_info{
		margin: 36upx 0 0 52upx;
		display: flex;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 40upx;
		width: 532upx;
	}
	
	.addr_det_update_box{
		display: flex;
	}
	
	.update_box{
		display: flex;
		flex-direction: row;
		align-items: baseline;
		/* background-color: #007AFF; */
		margin-left: 20upx;
		margin-top: 10upx;
	}
	.addr_update_name{
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		height: 40upx;;
		
	}
	
	.right_icon{
		width: 18upx;
		height: 18upx;
		border-top: 3upx solid #666666;
		border-right: 3upx solid #666666;
		transform: rotate(45deg);
	}
	
	.goods_box{
		background-color: #FFFFFF;
		padding: 48upx 16upx 24upx 24upx;
		border-radius: 8upx;
		/* margin-bottom: 22upx; */
		/* margin-top: 24upx; */
	}
	.goods_info_box{
		display: flex;
		
	}
	.goods_img_box{
		width: 198upx;
		height: 198upx;
	}
	.goods_img{
		width: 198upx;
		height: 198upx;
	}
	
	.goods_text_box{
		margin-left: 28upx;
	}
	
	.goods_name{
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 44upx;
	}
	
	.goods_size{
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		/* line-height: 34upx; */
		margin-top: 12upx;
	}
	
	.goods_price_box{
		margin-top: 30upx;
		display: flex;
		justify-content: space-between;
	}
	
	.goods_price{
		font-size: 33upx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #333333;
		line-height: 40upx;
	}
	
	.goods_num{
		font-size: 28upx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #333333;
		line-height: 40upx;
	}
	
	.order_price_box{
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		margin-top: 54upx;
	}
	
	.or_number{

		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 40upx;
		margin-right: 20upx;
	}
	
	.or_payMoeny{

		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 40upx;
	}
	
	.shar_add_box{
		padding: 48upx 20upx 20upx 22upx;
		background-color: #FFFFFF;
		display: flex;
	}
	
	.shar_name{
		font-size: 36upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 50upx;
		margin: 48upx 0 24upx 0;
	}
	
	/* .shar_goods_box{
		margin: 48upx 20upx 20upx 22upx;
		
	} */
	
	.shar_goods_name{
		/* margin-left: 38upx; */

		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 40upx;
	}
	
	.shar_price_box{
		/* margin-left: 38upx; */
		display: flex;
		margin-top: 32upx;
		align-items: center;
		width: 372upx;
		justify-content: space-between;
	}
	
	.shar_huax_price{
		text-decoration:line-through;
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40upx;
		opacity: 0.5;
	}
	
	.shar_goods_price{
		font-family: sans-serif;
		font-size: 32upx;
		font-weight: 600;
		color: #FF5638;
		line-height: 44upx;
	}
	
	.coupon_box{
		display: flex;
		padding: 36upx 24upx 34upx 24upx;
		justify-content: space-between;
		align-items: baseline;
		background-color: #FFFFFF;
		margin-top: 24upx;
		height: 110upx;
		box-sizing: border-box;
	}
	
	.coupon_right_box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 170upx;
	}
	
	.goods_money_box{
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		padding: 36upx 18upx 24upx 24upx;
		margin-top: 22upx;
	}
	.goods_send_box{
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		padding: 12upx 18upx 24upx 24upx;
	}
	
	.goods_send_money_box{
		display: flex;
		justify-content: space-between;
		width: 224upx;
		font-size: 28upx;
	}
	
	.huaxian_price{
		text-decoration: line-through;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
		opacity: 0.5;
	}
	.zhanwei{
		height: 300upx;
	}
	.godds_money{

		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
	}
	
	.goods_name_text{

		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
	}
	
	.goto_pay_button{
		position: fixed;
		bottom: 0;
		width: 100%;
		line-height: 120upx;
		background-color: #FFFFFF;
		
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  
	}
	
	.button_box{
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
	}
	.pay_number{

		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 0.5;
	}
	
	.pay_all{

		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;

	}
	.pay_nomey{

		font-size: 50upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	
	.pay_button{
		width: 232upx;
		text-align: center;
		background: #D8D8D8;
		line-height: 84upx;
		box-shadow: 0upx -4upx 0upx 0upx rgba(0,0,0,0.05);
		margin-left: 30upx;
		margin-right: 26upx;
	}
	.page_margin_box{
		margin: 20upx 28upx 0 28upx;
	}
	.choose_img_box{
		display: flex;
		width: 252upx;
		justify-content: space-between;
		align-items: center;
	}
	.chooes_quan{
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		border: 2upx solid #979797;
		box-sizing: border-box;
	}
	.shar_goods_name_box{
		margin-left: 28upx;
		width: 372upx;
	}
	.shar_box_price{
		width: 126upx;
		display: flex;
		align-items: center;
	}
	.shar_size{
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 34upx;
		margin-top: 10upx;
	}
	.coupon_name{
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40upx;
	}
</style>
